<!-- 个人中心 -->
<template>
    <view class="container">
        <view class="title_box">
            <view @click="clickItem(item)" v-for="(item, i) in titleList" :key="i" style="margin-left: 30rpx;">
                <view style="position: relative;display: flex;">
                    <view class="dian" v-if="handleitem==item"></view>
                    <view :class="item==handleitem?'yname':'noname'">{{item}}</view>
                </view>
            </view>
        </view>
        <view v-for="item in dataList">
            <view class="box">
                <view style="position: relative;">
                    <view class="num">{{item.fabulous_sum}}</view>
                    <image style="width: 205rpx;height: 192rpx;" src="https://huboshizb.bigchun.com/uploads/20220912/52011308d50066c1232dbf2a37b80bc5.png"></image>
                </view>
                <view class="box-you">
                    <view class="name">
                        {{item.title}}
                    </view>
                    <view :class="item.status===0?'content1':'content2'">
                        {{item.status ===0?'已解决咨询':'未解决咨询'}}
                    </view>
                </view>
            </view>
        </view>
        <view class="btn">
            我要咨询
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                handleitem: '最新咨询',
                titleList: [
                    "最新咨询", "全部咨询"
                ],
                dataList:[
                    {
                        id:0,
                        name:'怎样选择红宝石呢?',
                        content:'已解决咨询',
                        status:'0',
                        num:1779
                    },
                    {
                        id:1,
                        name:'冰种翡翠怎么鉴别?',
                        content:'待解决咨询',
                        status:'1',
                        num:1778
                    },
                    {
                        id:2,
                        name:'怎样鉴别钻石上的瑕疵?',
                        content:'已解决咨询',
                        status:'0',
                        num:1777
                    }
                ]
            }
        },
        onLoad() {},
        onShow() {
		this.getData()
        },
        computed: {

        },
        methods: {
            clickItem(val) {
                console.log("111", val)
                this.handleitem = val
            },
			getData() {
				let that=this
				that.$api.infoinfoList({
					title:that.value
				}).then(res => {
				    console.log('res',res)
				    if(res.code ==1){
				       that.dataList=res.data
				       console.log('shopList',that.dataList)
				    }
				});
		
			},
        },
    }
</script>

<style lang="scss" scoped>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .container {
        height: 100vh;
        background: #F5F5F5;
        overflow: hidden;
    }

    .box {
        height: 210rpx;
        background: #FFFFFF;
        border-radius: 28rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
        margin-top: 30rpx;
        padding: 10rpx 0rpx 0rpx 10rpx;
        display: flex;
    }

    .name {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
    }

    .tel {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        margin-left: 20rpx;
    }

    .status {
        background-size: 100% 100%;
        width: 84rpx;
        height: 39rpx;
        background-image: url('/static/image/fenxiao76.png');
        color: #0EAB28;
        font-size: 28rpx;
        text-align: center;
        margin-left: 20rpx;
    }

    .addr {
        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        margin-top: 30rpx;
    }

    .btn {
        width: 100%;
        height: 98rpx;
        background:#DE2415;
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        
font-weight: bold;
        bottom: 0;

    }

    .title_box {
        display: flex;
        // justify-content: space-around;
        margin-top: 33rpx;
        padding: 30rpx 0rpx 0rpx 30rpx;
    }

    .dian {
        background-size: 100% 100%;
        width: 35rpx;
        height: 35rpx;
        background-image: url('/static/image/fenxiao26.png');
        position: absolute;
      	 top: -5px;
        left: -7px;
    }

    .noname {
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      	 z-index: 9;
        // width: 100rpx;
    }

    .yname {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        // position: absolute;
        // width: 100rpx;
        left: 20rpx;
        top: 0rpx;
        z-index: 9;
    }

    .box-you {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 26rpx;
    }
    .content1{
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #2BC78A;
    }
    .content2{
        font-size: 30rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FF8A00
    }
    .num{
        width: 72rpx;
        height: 40rpx;
        background: #DE2415;
        box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(175,21,21,0.8);
        border-radius: 24rpx 16rpx 16rpx 0rpx;
            position: absolute;
            z-index: 1;
            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
    }
</style>
